<template>
  <ElSelect v-model="value" :multiple="multiple" :placeholder="placeholder" @change="onChange">
    <ElOption v-for="(option, k) in options" :label="option" :value="String(k)" :key="k" />
  </ElSelect>
</template>
<script setup>
  import { ref, watchEffect, inject, watch, computed } from 'vue'
  import VueTypes from 'vue-types'
  import { ElSelect, ElOption } from 'element-plus'
  import { isArray } from '@/utils/is'

  const props = defineProps({
    multiple: VueTypes.bool.def(false),
    placeholder: VueTypes.string.def('请选择'),
    options: VueTypes.object.def({}),
    modelValue: VueTypes.string
  })

  const emit = defineEmits(['update:modelValue'])

  const value = ref()
  const modelValue = props.modelValue
  if(props.multiple) {
    value.value = modelValue? modelValue.split(',') : []
  } else {
    value.value = modelValue
  }
  console.log('value.value====', value.value)

  const onChange = (val) => {
    emit('update:modelValue', isArray(val)? val.join(','): val)
  }

  // watchEffect(() => {
  //   emit('update:modelValue', isArray(value.value)? value.value.join(','): value.value)
  // })
  // watch(() => props.modelValue, (val) => {
  //   if(props.multiple) {
  //     value.value = modelValue? modelValue.split(',') : []
  //   } else {
  //     value.value = modelValue
  //   }
  // })

</script>
